<template>
  <div class="login">
    <!-- 顶部导航栏 -->
    <div class="heard">
      <div class="logo">
        <!-- 左边logo -->
        <a href id="logo"></a>
        <!-- 右边链接 -->
        <div class="logo_box">
          <a href class="top_link anti"></a>
          <a href class="top_link exem"></a>
          <a href class="top_link deli"></a>
        </div>
      </div>
    </div>
    <!-- 主体 -->
    <div class="sign">
      <div class="main">
        <div class="login_img"></div>
        <!-- 表单 -->
        <div class="menu">
          <div class="title">
            <div class="to_regist">
              还没有聚美账号？
              <a href>30秒注册</a>
            </div>
            <h1>
              <strong>登录聚美</strong>
            </h1>
          </div>
          <div class="radio">
            <span>
              <input type="radio" name="" id="" />
              <label for="">手机动态密码登录</label>
            </span>
            <span>
              <input type="radio" name="" id="" />
              <label for="">普通登录</label>
            </span>
          </div>
          <!-- 表单 -->
          <form action="">
            <div class="text_box user">
              <input
                type="text"
                name=""
                id=""
                placeholder="已验证手机/邮箱/用户名"
              />
              <div class="focus_text">
                请输入登录名，登录名可能是您的手机号、邮箱或用户名
              </div>
            </div>
            <div class="text_box pass"></div>
            <div class="text_box yanz"></div>
          </form>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {};
</script>

<style scoped>
/* 顶部导航 */
.heard {
  min-width: 960px;
  /* background: #fff; */
}
.logo {
  height: 85px;
  width: 960px;
  margin: 0 auto;
}
#logo {
  background: no-repeat url("../assets/images/logo_new_v1.jpg");
  width: 360px;
  height: 85px;
  overflow: hidden;
  float: left;
  font-size: 0;
  line-height: 0;
}
.logo_box {
  display: inline-block;
  padding-top: 35px;
  float: right;
}
.top_link {
  width: 110px;
  height: 31px;
  overflow: hidden;
  margin-right: 24px;
  float: right;
}
.top_link {
  background-image: url("../assets/images/header_corn_new_v2.png");
}
.anti {
  background-position: 0 -64px;
}
.exem {
  background-image: url("../assets/images/gild.png");
  width: 170px;
}
/* 主体部分 */
.main {
  height: 475px;
  margin-bottom: 50px;
  margin: 100px auto;
  line-height: 1.5;
  width: 965px;
  margin-top: 50px;
  position: relative;
}
.login_img {
  background: url("../assets/images/loginPic.jpg") no-repeat;
  width: 960px;
  height: 360px;
  position: absolute;
}
/* 表单 */
.menu {
  width: 300px;
  box-shadow: 0 0 4px rgba(0, 0, 0, 0.075);
  background: rgba(255, 255, 255, 0.85);
  position: absolute;
  min-height: 400px;
  padding: 0 23px;
  color: #333;
  font-size: 12px;
  right: 0;
}
.title h1 {
  font-weight: 400;
  font-size: 20px;
  color: #e31256;
}
.to_regist {
  color: #969696;
  float: right;
  font-size: 12px;
  margin-top: 8px;
}
.to_regist a {
  color: #ed145b;
  text-decoration: none;
}
.radio {
  display: block;
  height: 30px;
  font-size: 12px;
}
.radio span {
  padding-right: 30px;
}
.radio input {
  vertical-align: middle;
  margin-bottom: 5px;
  font-size: 12px;
}
.text_box {
  margin-bottom: 26px;
  position: relative;
  height: 44px;
}
</style>
